<template>
  <div> 
   <form  v-if="!isFalse">
    <p>用户名：</p> 
     <input type="text" v-model='name'>
      <p> 密码：</p>
     <input type="password" v-model="password">
     <div>
        <button type="button" @click="log()">登录</button>
      <button type="button" @click="reg()">注册</button>
     </div>
     
   </form>
   <form  v-else>
      <p>用户名：</p> 
     <input type="text" v-model='name'>
     <p> 密码：</p>
     <input type="password" v-model="password">
     <p> 再次输入密码：</p>
     
     <input type="password" v-model="repeat">
      <button type="button" @click="addUser()">确定</button>
      <button type="button" @click="cancel()">取消</button>
   </form>
    </div>
</template>

<script>
export default {
name:"login",
data(){
  return{
    isFalse:false,
    name:'',
    password:'',
    repeat:''
  }
},
methods:{
  log(){
    if(localStorage.getItem('name')===this.name && localStorage.getItem('password')===this.password){
      this.name='',
      this.password=''
    this.$router.push('/home/list')}
    else{
      alert('用户名密码不正确')

    }
  },
  reg(){
    this.isFalse=true 
  },
  addUser(){
    if(this.password===this.repeat){
        localStorage.setItem('name',this.name)
      localStorage.setItem('password',this.password)
      this.name=""
      this.password=""
      this.isFalse=false
    }
    else{
        alert('密码不一致')
    }
     
   
    
  },
  cancel(){
    this.isFalse=false
  }
}
}
</script>

<style>

</style>